<template name="InvitePlayers">

	<section class="invite-players">
		<div class="invite-players__wrapper">
			<form id="invite-players" class="invite-players__content">
				<div class="invite-players__inputs">
					{{> SearchInvitePlayers
						onClickTag=onClickTagUser
						deleteLastItem=deleteLastItemUser
						list=selectedUsers
						onSelect=onSelectUser
						collection='UserAndRoom'
						endpoint='users.autocomplete'
						field='username'
						sort='username'
						label="Invite_Users"
						placeholder="Username_Placeholder"
						name="users"
						icon="at"
						noMatchTemplate="userSearchEmpty"
						templateItem="popupList_item_default"
						modifier=userModifier
					}}
				</div>
				<input form="invite-players" style="background-color: #1D74F5; float: right;" class="rc-button rc-button--right rc-button--primary js-invite-players" type="submit" data-button="create" value="Invite">
			</form>
		</div>
	</section>
</template>

<template name="SearchInvitePlayers">
	<div class="rc-input" id='search-{{name}}' {{disabled}}>
		<label class="rc-input__label">
			<div class="rc-input__title">{{_ label}}</div>
			<div class="rc-input__wrapper">
				{{# if icon}}
				<div class="rc-input__icon">
					{{> icon block="rc-input__icon-svg" icon=icon}}
				</div>
				{{/if}}
				<div class="rc-tags{{# unless icon}} rc-tags--no-icon{{/unless}}">
					{{#each item in list}} {{> tag item}} {{/each}}
					<input type="text" id="{{name}}" class="rc-tags__input" placeholder="{{_ placeholder}}" name="{{name}}" autocomplete="off" {{disabled}} />
				</div>
			</div>
			{{#with config}}
				{{#if autocomplete 'isShowing'}}
					{{> popupList data=config items=items ready=(autocomplete 'isLoaded')}}
				{{/if}}
			{{/with}}
		</label>
		<div class="rc-input__description">{{ description }}</div>
	</div>
</template>
